<template>
  <el-container>
    <el-main class="main-bg">
      <div class="main-bg-content">
        <div id="printArea" ref="printArea" class="detail">
          <div class="title">市农科院随机抽选供应商备案表</div>
          <div class="main">
            <div class="top">
              <span class="name0">根据工作需要，通过系统随机抽选</span><span class="name">{{ form.businessName }}</span> 作为<span
                class="name"
              >{{ form.planName }} </span>供应商。
            </div>
            <div class="middle">
              经联系确认：<span>{{ form.businessName }}</span>（<span class="square" />不存在
              <span class="square" />存在）需要回避等情况，（<span
                class="square"
              />可以 <span class="square" />不可以）承接相关工作。
            </div>
            <div class="bottom">特此备案。</div>
            <div class="sign">
              <div class="item">
                <span>操作员：{{ form.checkMan1 }}</span>
                <span>签&nbsp;&nbsp;&nbsp;字：____________</span>
              </div>
              <div class="item">
                <span>监督员：{{ form.checkMan2 }}</span>
                <span>签&nbsp;&nbsp;&nbsp;字：____________</span>
              </div>
            </div>
            <div class="date">日期：{{ form.date }}</div>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button @click="onBack">返回</el-button>
        <el-button v-print="printObj" type="primary">打印</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getExtractFindById, getPlanFindById } from "./api";
import { Loading } from "element-ui";
import { mapGetters } from "vuex";
import { parseTime } from "@/utils";
export default {
  name: "ExtractDetail",
  data() {
    return {
      extractId: "",
      loading: false,
      form: {
        checkMan1: "", // 操作员
        checkMan2: "", // 监督员
        businessName: "",
        date: null,
      },
      printObj: {
        id: "printArea",
        // popTitle: '打印', // 打印配置页上方标题
        extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: "",
        standard: "",
        extraCss: "",
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.extractId = this.$route.query.extractId;
    this.getExtractDetail();
  },

  methods: {
    onBack() {
      this.$router.go(-1);
    },
    checkPlanExist(planId) {
      try {
        getPlanFindById({ planId })
          .then(({ success, message, data }) => {
            if (success) {
              this.form.checkMan1 = data.checkMan1;
              this.form.checkMan2 = data.checkMan2;
              this.form.planName = data.planName;
            } else {
              this.$message.error(message);
            }
          })
          .catch();
      } catch (error) {
      } finally {
        this.$nextTick(() => {
          this.loading = false;
          setTimeout(() => {
            this.loadingInstance.close();
          }, 200);
        });
      }
    },
    getExtractDetail() {
      try {
        this.loadingInstance = Loading.service({
          fullscreen: false,
        });
        this.loading = true;
        getExtractFindById({ extractId: this.extractId })
          .then(({ success, message, data }) => {
            if (success) {
              this.form.businessName = data.businessName;
              this.form.planId = data.planId;
              this.form.date = parseTime(data.createdTime, "{y}年{m}月{d}日");
              this.checkPlanExist(this.form.planId);
            } else {
              this.$message.error(message);
            }
          })
          .catch();
      } catch (error) {}
    },
  },
};
</script>
<style lang="scss">
@page {
  size: auto;
  margin: 0mm 3mm;
}
.main-bg-content {
  margin: 0 auto;
}
#printArea {
  width: 100%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 50px;
  .title {
    margin-bottom: 80px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: 方正小标宋简体;
  }
  .main {
    width: 90%;
    line-height: 2;
    font-family: "FangSong";
    .top {
      span {
        display: inline-block;
      }
      .name0 {
        text-indent: 2em;
      }
      .name {
        font-weight: bold;
        min-width: 370px;
        position: relative;
        height: 30px;
        text-align: center;
        border-bottom: 1px solid #000;
      }
      .name2 {
        height: 30px;
      }
    }
    .middle {
      text-indent: 2em;
      span {
        font-weight: bold;
      }
      .square {
        width: 16px;
        height: 16px;
        display: inline-block;
        border: 1px solid #000;
        margin-right: 5px;
        margin-left: 10px;
      }
    }
    .bottom {
      text-indent: 2em;
    }
    .sign {
      margin: 80px 50px 50px 50px;
      display: flex;
      justify-content: space-between;
      .item {
        display: flex;
        flex-direction: column;
        span {
          margin-bottom: 20px;
          display: inline-block;
        }
      }
    }
    .date {
      display: flex;
      margin-left: 50px;
    }
  }
}
</style>
